<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<style>
    .background {
        fill: #EBEBE2;
    }

    line {
        stroke: #fff;
    }

    text.active {
        fill: "green";
    }

</style>
<script src="http://d3js.org/d3.v2.min.js?2.8.1"></script>
<aside style="margin-top:80px;">
    <p>Order: <select id="order">
            <option value="name">Name [A-Z]</option>
            <option value="count">Name [Z-A]</option>
        </select>


</aside>
<div id="chart" style="margin-left:300px">
</div>
<script>
 
    var margin = {top: 120, right: 150, bottom: 10, left: 250},
    width = 900,
    height =2200;
 
    var  z = d3.scale.linear().domain([0, 1]).clamp(true),
    c = d3.scale.category10().domain(d3.range(10)),
    color =  d3.scale.linear().domain([0,1]).range(["white","green"]);
 
    var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .style("margin-left", -margin.left + "px")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
    d3.json("vectors.json", function(data) {
   
        var matrix = [],
        vector = data.vectors,
        tags = data.tags,
        tagmap = [],
        n=vector.length,
        m= tags.length,
        col_data=[],
        hlink = [],
        tag_tag=[],
        tag_PCS=[],
        tag_promoter=[],
        tag_index=0,
        PCS_index=0,
        promoter_index=0;
       
 
        // Compute index per node.
       
        vector.forEach(function(vector, i) {
            hlink[i]=[];
            vector.index = i;
            vector.count = 0;
            hlink[i]='http://dnasu.asu.edu/DNASU/GetVectorDetail.do?vectorid='+vector.id;
        });
        tags.forEach(function(tags, k) {
            tags.index = k;
            tags.count = 0;
            col_data[k] =k;
            if(tags.type=='tag'){
                tag_tag[tag_index]=tags[k];
                tag_index++;
            }
            if(tags.type=='PCS'){
                tag_PCS[PCS_index]=tags[k];
                PCS_index++;
            }
            if(tags.type=='promoter'){
                tag_promoter[promoter_index]=tags[k];
                promoter_index++;
            }
        });
        var x1 = d3.scale.ordinal().rangeBands([0, width]),
        y1 = d3.scale.ordinal().rangeBands([0, height]);
        for(i=0;i<n;i++){
            tagmap[i]=[];
            matrix[i]=[];
            for(j=0;j<m;j++){
                matrix[i].push({x:j,y:i,z:0});
                tagmap[i][j] =0;
            }
        }
        // Convert links to matrix; count character occurrences.
        data.links.forEach(function(link) {
            matrix[link.vec][link.tag].z = link.value;
            tagmap[link.vec][link.tag] = link.value;
        });
 
        // Precompute the orders.
        var orders = {
            name: d3.range(n).sort(function(a, b) { return d3.ascending(vector[a].name.toLowerCase(), vector[b].name.toLowerCase()); }),
            count: d3.range(n).sort(function(a, b) { return d3.descending(vector[a].name.toLowerCase(), vector[b].name.toLowerCase()); })
        };
        y1.domain(orders.name);
        x1.domain(col_data);
       
        svg.append("rect")
        .attr("class", "background")
        .attr("width", width)
        .attr("height", height);
 
        var row = svg.selectAll(".row")
        .data(matrix)
        .enter().append("g")
        .attr("class", "row")
        .attr("transform", function(d, i) { return "translate(0," + y1(i) + ")"; })
        .each(row);
 
        row.append("line")
        .attr("x2", height);
 
        row.append("a")
        .attr("xlink:href", function(d,i) { return hlink[i]; })
        .attr("target","_blank")
        .append("text")
        .attr("x", -5)
        .attr("y", x1.rangeBand()/2)
        .attr("dy", ".32em")
        .attr("text-anchor", "end")
        .style('fill',"blue")
        .text(function(d, i) { return vector[i].name; });
        
        var column = svg.selectAll(".column")
        .data(col_data)
        .enter().append("g")
        .attr("class", "column")
        .attr("width",function(d,i){return x1(d);})
        .attr("height",function(d,i){return y1(d);})
        .attr("transform", function(d, i) { return "translate(" + x1(i) + ",0)rotate(-90)"; })
          
        column.append("svg:title")
        .text("Click to sort");

        var colorgroup = new Array(3);
        colorgroup[0] = "#FF0000";
        colorgroup[1] = "#000066";
        colorgroup[2] = "#8383AC";

        column.append("line")
        .attr("x1", -height);
 
        column.append("a")
        .attr("xlink:href","#")
        .append("text")
        .attr("x", 10)
        .attr("y", y1.rangeBand()/2)
        .attr("dy", ".32em")
        .attr("text-anchor", "start")
        .style('fill', function(d,i) { if(i<tag_index)
                return colorgroup[0];else if((i<tag_index+PCS_index)){return colorgroup[1];} else if(i<tag_index+PCS_index+promoter_index){return colorgroup[2];} })
            .text(function(d, i) { return tags[i].name; });
         var vecNames = d3.range(n).sort(function(a, b) { return d3.ascending(vector[a].name.toLowerCase(), vector[b].name.toLowerCase()); });
            
            var vec = svg.append("text")
            .attr("x", -80)
            .attr("y",-20 )
            .style("font-size", '18px')
            .style("font-weight", 'bold')
            .style("fill","blue")
            .text("Vectors");
            
            vec.append("svg:title")
            .text("Click to sort");
            
            vec.append("a")
            .attr("xlink:href","#")
            .attr("target","_self");
            
            vec.on("click",function(){
                y1.domain(vecNames.reverse());
                var t = svg.transition().duration(1000);
                t.selectAll(".row")
                .delay(function(d, i) { return x1(i)*2; })
                .attr("transform", function(d, i) { return "translate(0," + y1(i) + ")"; })
                .selectAll(".cell")
                .delay(function(d) { return x1(d.x)*2; })
                .attr("x", function(d) { return x1(d.x); });
            });
        
            svg.append("text")
            .attr("x", 120)
            .attr("y",-100 )
            .style("font-size", '18px')
            .style("font-weight", 'bold')
            .style("fill","#FF0000")
            .text("Tags");
        
            svg.append("text")
            .attr("x", 350)
            .attr("y",-100 )
            .style("font-size", '18px')
            .style("font-weight", 'bold')
            .style("fill","#000066")
            .text("Protease Cleavage Sites");
        
            svg.append("text")
            .attr("x", 650)
            .attr("y",-100 )
            .style("font-size", '18px')
            .style("font-weight", 'bold')
            .style("fill","#8383AC")
            .text("Promoters");
       
            d3.selectAll(".column")
            .data(tags)
            .on("click",function(k){ 
                clickTags(k,tagmap);
            });
            function clickTags(tags,row){
           
                var temp=d3.range(n).sort(function(a,b){return d3.ascending(row[a][tags.index],row[b][tags.index]);}).reverse();
                y1.domain(temp);
                var t = svg.transition().duration(1000);
                t.selectAll(".row")
                .delay(function(d, i) { return x1(i)*2; })
                .attr("transform", function(d, i) { return "translate(0," + y1(i) + ")"; })
                .selectAll(".cell")
                .delay(function(d) { return x1(d.x)*2; })
                .attr("x", function(d) { return x1(d.x); });
            }
           
           
            function row(row) {
                var cell = d3.select(this).selectAll(".cell")
                .data(row.filter(function(d) { return d.z; }))
                .enter().append("rect")
                .attr("class", "cell")
                .attr("x", function(d) { return x1(d.x); })
                .attr("width", x1.rangeBand())
                .attr("height", y1.rangeBand())
                .style("fill", "#004029")
                //.style("fill", function(d) { return color(vector[d.y].value);})
                .on("mouseover", mouseover)
                .on("mouseout", mouseout)
                .append("svg:title")
                .text(function(d){return vector[d.y].name+' : '+tags[d.x].name;});
           
            }
    
        
            function mouseover(p) {
                d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
                d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
            }
 
            function mouseout() {
                d3.selectAll("text").classed("active", false);
            }
 
            d3.select("#order").on("change", function() {
                order(this.value);
            });
 
            function order(value) {
                y1.domain(orders[value]);
                var t = svg.transition().duration(2000);
                t.selectAll(".row")
                .delay(function(d, i) { return x1(i)*3; })
                .attr("transform", function(d, i) { return "translate(0," + y1(i) + ")"; })
                .selectAll(".cell")
                .delay(function(d) { return x1(d.x)*3; })
                .attr("x", function(d) { return x1(d.x); });
            }
 
        });
 
</script>